<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-09-11 12:22:58
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-11 19:43:09
 -->
<style lang="less" scoped>
.enterBox{
  .part1{
    width: 100%;
    height: 13.35rem;
    background: url('../../assets/wap/enterbg1@2x.png') no-repeat;
    background-size: 100% 100%;
    // padding: 1.34rem 0 0 0.9rem;
    // box-sizing: border-box;
    .line{
      margin-top: 1.34rem;
      width:0.52rem;
      height:0.08rem;
      background:rgba(253,55,26,1);
      margin-left: 0.9rem;
    }
    .titleBox{
      display: flex;
      align-items: flex-end;
      padding-top: 0.38rem;
      margin-left: 0.89rem;
      .left{
        font-size: 1.3rem;
        color: #ffffff;
        font-weight: bold;
      }
      .right{
        color: #ffffff;
        .s1{
          font-size: 0.22rem;
          padding-bottom: 0.22rem;
        }
        .s2{
          font-weight: bold;
          font-size: 0.65rem;
        }
      }
    }
    .getBox{
      width:5.34rem;
      height:4.51rem;
      background:rgba(253,55,26,0.7);
      margin-top: 1.02rem;
      margin-left: 1.43rem;
      .p1{
        padding-top: 0.45rem;
        padding-left: 0.7rem;
        font-weight: bold;
        color: #ffffff;
        .s1{
          font-size: 0.48rem;
        }
        .s2{
          font-size: 0.36rem;
          margin-left: 0.1rem;
          padding-bottom: 0.1rem;
        }
      }
      .p2{
        font-size: 0.32rem;
        font-weight: bold;
        color: #ffffff;
        padding-left: 0.69rem;
        padding-top: 0.23rem;
      }
      .p3{
        color: #ffffff;
        font-size: 0.24rem;
        line-height: 0.36rem;
        width: 4.13rem;
        padding-left: 0.66rem;
        padding-top: 0.34rem;
      }
      .getBtnBox{
        padding-left: 0.69rem;
        padding-top: 0.44rem;
        .btn{
          width:2.50rem;
          height:0.8rem;
          background:rgba(255,255,255,0);
          border:1px solid rgba(255,255,255,1);
          font-size: 0.24rem;
          color: #ffffff;
          line-height: 0.8rem;
          text-align: center;
        }
      }
    }
  }
  .part2{
    width: 100%;
    height: 13.35rem;
    background: url('../../assets/wap/enterbg2@2x.png') no-repeat;
    background-size: 100% 100%;
    .line{
      margin-top: 1.34rem;
      width:0.64rem;
      height:0.1rem;
      background:rgba(253,55,26,1);
      margin-left: 1.8rem;
    }
    .titleBox{
      display: flex;
      align-items: flex-end;
      padding-top: 0.39rem;
      margin-left: 1.79rem;
      .left{
        font-size: 1.47rem;
        color: #000000;
        font-weight: bold;
      }
      .right{
        color: #000000;
        .s1{
          font-size: 0.24rem;
          padding-bottom: 0.22rem;
          color: #666666;
        }
        .s2{
          font-weight: bold;
          font-size: 0.74rem;
          padding-bottom: 0.1rem;
        }
      }
    }
    .getBox{
      width:6.05rem;
      height:5.42rem;
      background:rgba(204,204,204,1);
      margin-top: 0.52rem;
      margin-left: 0.37rem;
      .p1{
        padding-top: 0.94rem;
        padding-left: 0.9rem;
        font-weight: bold;
        color: #333333;
        font-size: 0.36rem;
      }
      .p2{
        font-size: 0.3rem;
        font-weight: bold;
        color: #333333;
        padding-left: 0.93rem;
        padding-top: 0.26rem;
      }
      .p3{
        color: #333333;
        font-size: 0.24rem;
        line-height: 0.36rem;
        width: 4.14rem;
        padding-left: 0.9rem;
        padding-top: 0.3rem;
      }
      .getBtnBox{
        padding-left: 0.9rem;
        padding-top: 0.51rem;
        .btn{
          width:4.14rem;
          height:0.8rem;
          background:rgba(255,255,255,0);
          border:1px solid #333333;
          font-size: 0.24rem;
          color: #333333;
          line-height: 0.8rem;
          text-align: center;
        }
      }
    }
  }
  .part3{
    width: 100%;
    height: 13.48rem;
    background: url('../../assets/wap/enterbg3@2x.png') no-repeat;
    background-size: 100% 100%;
    .line{
      margin-top: 1.89rem;
      width:0.52rem;
      height:0.08rem;
      background:rgba(253,55,26,1);
      margin-left: 0.59rem;
    }
    .titleBox{
      display: flex;
      align-items: flex-end;
      padding-top: 0.35rem;
      margin-left: 0.59rem;
      .left{
        font-size: 1.3rem;
        color: #ffffff;
        font-weight: bold;
      }
      .right{
        color: #ffffff;
        .s1{
          font-size: 0.22rem;
          padding-bottom: 0.22rem;
        }
        .s2{
          font-weight: bold;
          font-size: 0.65rem;
        }
      }
    }
    .getBox{
      width:6.06rem;
      height:5.67rem;
      background:rgba(253,55,26,0.7);
      margin-top: 0.62rem;
      margin-left: 1.03rem;
      .p1{
        padding-top: 0.83rem;
        padding-left: 1rem;
        font-weight: bold;
        color: #ffffff;
        font-size: 0.36rem;
      }
      .p2{
        font-size: 0.3rem;
        font-weight: bold;
        color: #ffffff;
        padding-left: 1rem;
        padding-top: 0.26rem;
      }
      .p3{
        color: #ffffff;
        font-size: 0.24rem;
        line-height: 0.36rem;
        width: 4.13rem;
        padding-left: 1.01rem;
        padding-top: 0.38rem;
      }
      .getBtnBox{
        padding-left: 0.69rem;
        padding-top: 0.44rem;
        .btn{
          width:4.13rem;
          height:0.8rem;
          background:rgba(255,255,255,0);
          border:1px solid rgba(255,255,255,1);
          font-size: 0.24rem;
          color: #ffffff;
          line-height: 0.8rem;
          text-align: center;
        }
      }
    }
  }
  .part4{
    width: 100%;
    height: 13.34rem;
    background: url('../../assets/wap/enterbg4@2x.png') no-repeat;
    background-size: 100% 100%;
    .line{
      margin-top: 1.48rem;
      width:0.52rem;
      height:0.08rem;
      background:rgba(253,55,26,1);
      margin-left: 1.81rem;
    }
    .titleBox{
      display: flex;
      align-items: flex-end;
      padding-top: 0.32rem;
      margin-left: 1.68rem;
      .left{
        font-size: 1.31rem;
        color: #333333;
        font-weight: bold;
      }
      .right{
        color: #333333;
        .s1{
          font-size: 0.24rem;
          padding-bottom: 0.22rem;
          color: #333333;
        }
        .s2{
          font-weight: bold;
          font-size: 0.66rem;
          padding-bottom: 0.1rem;
        }
      }
    }
    .getBox{
      width:6.01rem;
      height:5.99rem;
      background:rgba(51,51,51,0.7);;
      margin-top: 1.42rem;
      margin-left: 0.39rem;
      .p1{
        padding-top: 1.28rem;
        padding-left: 0.88rem;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 0.36rem;
      }
      .p2{
        font-size: 0.3rem;
        font-weight: bold;
        color: #FFFFFF;
        padding-left: 0.88rem;
        padding-top: 0.27rem;
      }
      .p3{
        color: #FFFFFF;
        font-size: 0.24rem;
        line-height: 0.36rem;
        width: 4.14rem;
        padding-left: 0.9rem;
        padding-top: 0.3rem;
      }
      .getBtnBox{
        padding-left: 0.89rem;
        padding-top: 0.61rem;
        .btn{
          width:4.14rem;
          height:0.8rem;
          border:1px solid #ffffff;
          font-size: 0.24rem;
          color: #FFFFFF;
          line-height: 0.8rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
<template>
<div class="enterBox">
  <transition name="bounce">
    <NavDraw @close='closeClicked' @linked='linkedClicked' v-if="isOpenedNavDraw"></NavDraw>
  </transition>
  <div class="wrap">
    <div class="part1">
      <HeaderNav  @openNav='openNavClicked'></HeaderNav>
      <div class="line"></div>
      <div class="titleBox">
        <p class="left">有车</p>
        <div class="right">
          <p class="s1">资金周转 极速放款</p>
          <p class="s2">就能贷</p>
        </div>
      </div>
      <div class="getBox">
        <p class="p1">
          <span class="s1">车抵贷</span>
          <span class="s2">车辆抵押贷款</span>
        </p>
        <p class="p2">有车就能贷 最快当天可放款</p>
        <p class="p3">汽车贷款，额度高放款快、申请材料简单。目前有GPS不押车和押车等多种服务模式可供选择。</p>
        <div class="getBtnBox">
          <p class="btn" @click="getMoneyClicked">立即申请</p>
        </div>
      </div>
    </div>
    <div class="part2">
      <HeaderNav :logoSelect='2' :txtSelect='2' :navSelect='2' @openNav='openNavClicked'></HeaderNav>
      <div class="line"></div>
      <div class="titleBox">
        <p class="left">信用</p>
        <div class="right">
          <p class="s1">门槛低 额度高</p>
          <p class="s2">无抵押</p>
        </div>
      </div>
      <div class="getBox">
        <p class="p1">
          信用贷
        </p>
        <p class="p2">1-3年期低息高额纯信用贷</p>
        <p class="p3">低息高额，无抵押，最高100万纯信用产品。只需立即申请即可预约专业信贷经理定制化信贷方案。5分钟申请,2分钟放款</p>
        <div class="getBtnBox">
          <p class="btn" @click="getMoneyClicked">立即申请</p>
        </div>
      </div>
    </div>
    <div class="part3">
       <HeaderNav @openNav='openNavClicked'></HeaderNav>
       <div class="line"></div>
        <div class="titleBox">
          <p class="left">有房</p>
          <div class="right">
            <p class="s1">房屋抵押 银行贷款</p>
            <p class="s2">就能贷</p>
          </div>
        </div>
        <div class="getBox">
          <p class="p1">
            房抵贷
          </p>
          <p class="p2">房屋抵押银行贷款</p>
          <p class="p3">有房产证就能贷，可贷评估值的80%。对接多个银行的多款产品，利息低、更专业省、更省心。只需立即申请即可预约专业信贷经理定制化适合您的贷款方案。</p>
          <div class="getBtnBox">
            <p class="btn" @click="getMoneyClicked">立即申请</p>
          </div>
        </div>
    </div>
    <div class="part4">
      <HeaderNav :logoSelect='2' :txtSelect='2' :navSelect='2' @openNav='openNavClicked'></HeaderNav>
      <div class="line"></div>
      <div class="titleBox">
        <p class="left">房屋</p>
        <div class="right">
          <p class="s1">房产已抵押还能进行贷款</p>
          <p class="s2">二次抵押</p>
        </div>
      </div>
      <div class="getBox">
        <p class="p1">
          房抵贷
        </p>
        <p class="p2">房屋二次抵押贷款</p>
        <p class="p3">房产已抵押还能再贷款，原贷款不必还请，提前还款无违约金。只需立即申请即可预约专业信贷经理定制化适合您的贷款方案。</p>
        <div class="getBtnBox">
          <p class="btn" @click="getMoneyClicked">立即申请</p>
        </div>
      </div>
    </div>
    <Footer @openNav='openNavClicked'></Footer>
    <LoginView :isShow='isShowLogin' @closeLogin='closeLogin'></LoginView>
  </div>
</div>
</template>
<script>
import Mixmin from './mixin/same'
import LoginView from '../../components/mobileLogin';
export default {
  data() {
    return {
      isShowLogin: false
    }
  },
  mixins: [Mixmin],
  components: {
    LoginView
  },
  methods: {
    getMoneyClicked() {
      this.isShowLogin = true
    },
    closeLogin() {
      this.isShowLogin = false
    }
  }
}
</script>